<template>
    <div class="message_module_wrapper">
        <scroll-bar class="message_scroll">
            <table-list :bordered="false" :loading="loading" :columns="columns" rowKey="messageId" :pagination="false" :data="list">
                <template slot="index" slot-scope="{ index }">
                    <span>{{ (form.page - 1) * form.size + index + 1 }}</span>
                </template>
                <template slot="messageStatus" slot-scope="{ text }">
                    <list-status :data="status" :value="text.messageStatus" type="label" />
                </template>
            </table-list>
        </scroll-bar>
    </div>
</template>
<script>
import table from '@/mixins/table';
import { msgCoulumns } from './columns';
import { remoteMessageList } from '@/api/home'
import {status} from './dictionary'
export default {
    name: 'messageInfo',
    mixins: [table],
    props: {
        userId: {
            type: String | Number,
            default: ''
        }
    },
    data() {
        return {
            columns: msgCoulumns,
            status,
        };
    },
    created(){
        this.search();
    },
    methods: {
        async search() {
            this.loading = true;
            try {
                let userId = this.userId;
                let res = await remoteMessageList({
                    userId,
                    page:1,
                    size:10
                });
                let {list} = res.data;
                this.list = list;
            } finally {
                this.loading = false;
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.message_scroll{
    height: 460px;
    overflow: hidden;
    &::v-deep .ant-table-middle > .ant-table-content > .ant-table-body > table > .ant-table-thead > tr > th,
    &::v-deep .ant-table-placeholder{
        border: none;
    }
    &::v-deep .ant-table-wrapper{
        box-shadow: none;
    }
    &::v-deep .scrollbar__wrap .scrollbar__view {
        background-color: #fff;
        padding: 0;
    }
    &::v-deep .scrollbar__wrap .scrollbar__view {
        background-color: #fff;
        padding: 0;
    }
}
</style>
